<script setup>
/**
 * & 文件引入区域
 */

/**
 * & 注册区
 */
defineProps(["info"]);

/**
 * & 变量声明区
 */

/**
 * & 函数区
 */
</script>

<template>
  <div class="flightInfoCom">
    <div class="topInfo">
      <div class="type">one-way</div>
      <div class="deta">{{ info }}</div>
    </div>

    <div class="Step">
      <div class="time">
        <div class="text">18:20</div>
        <div class="text">20:40</div>
      </div>

      <img src="/images/Shop/StepBar.png" alt="" class="StepBar" />

      <div class="type">
        <span>CAN T1</span>
        <div class="tag">
          <img src="/images/Shop/filghtLogo.png" alt="" class="logo" />
          <div class="text">MU CA1829 | Dinner</div>
        </div>
        <span>SHA T1</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flightInfoCom {
  > .topInfo {
    display: flex;
    align-items: center;

    font-size: 12rem;
    font-weight: 400;
    line-height: 14rem;
    color: #333;

    margin-bottom: 16rem;

    > .type {
      color: #642e8e;
      background: #642e8e33;
      padding: 2rem 5rem;
      border-radius: 4rem;
      margin-right: 6rem;
    }

    > .deta {
      flex: 1;
      text-align: center;
    }
  }

  > .Step {
    display: flex;

    > .time {
      > .text {
        font-size: 12rem;
        font-weight: 400;
        line-height: 14rem;
        color: #333;
        margin-bottom: 45rem;

        &:last-of-type {
          margin: 0;
        }
      }
    }

    > .StepBar {
      width: 4rem;
      height: 60rem;
      margin: 7rem 16rem 0;
    }

    > .type {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      > .tag {
        display: flex;
        align-items: center;

        border-radius: 5rem;
        background: #e6e6e6;
        padding: 2rem 7rem;

        > .logo {
          width: 21rem;
          margin-right: 8rem;
        }
      }
    }
  }
}
</style>
